<template>
  <cloudPage>
    <cloudHeader slot="gHeader">
      <view class="grace-header-body" style="background:#fff;">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          style="color:#000;"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center font-32"
          style="color:#000;"
          >{{ $t("otc.order.appeal.title") }}</view
        >
        <!-- 右侧按钮 -->
        <view class="icons grace-icons"></view>
      </view>
    </cloudHeader>
    <view class="re-container">
      <view class="re-content">
        <view class="re-text">
          <textarea
            class="re-input"
            style="height:250rpx;"
            maxlength="240"
            v-model="reValue"
            :placeholder="$t('otc.order.appeal.tips_none')"
          />
          <view class="value-length">{{ reValue.length }}/240</view>
          <view style="margin:20rpx 0;">
            <text style="color:rgba(111,111,111,1);font-size:24rpx;"
              >{{$t('otc.order.appeal.photos')}}</text
            >
          </view>
          <!-- 如果没有默认值则不需要 -->
          <graceSelectImg
            :maxFileNumber="6"
            @removeImg="removeImg"
            @change="imgsChange"
            class="re-img"
            :btnName="$t('common.title.add_photo')"
          ></graceSelectImg>
        </view>
      </view>
      <button
        v-if="isButton"
        @click="submit"
        style="line-height:80rpx;width:630rpx;height:80rpx;font-size:27rpx;color:#fff;background:#699CE8;border-radius:39rpx;position:absolute;bottom:20rpx;left:50%;transform: translateX(-50%);"
      >
        {{$t('otc.order.appeal.submit')}}
      </button>
      <button
        v-else
        style="line-height:80rpx;width:630rpx;height:80rpx;font-size:27rpx;color:#aaa;background:#f1f1f1;border-radius:39rpx;position:absolute;bottom:20rpx;left:50%;transform: translateX(-50%);"
      >
        $t('otc.order.appeal.submit')
      </button>
    </view>
  </cloudPage>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      reValue: "",
      reImgList: [],
      imageList: [],
      isButton: true,
      reID: ""
    };
  },
  onLoad(option) {
    this.reID = option.id; // 获取申述挂单id
  },
  methods: {
    ...mapActions("media", ["reUpload", "tradeAppeal"]),
    ...mapActions("otc", ["tradeAppeal"]),
    // 加入图片
    imgsChange(imgs) {
      this.reImgList = [...imgs];
      console.log(this.reImgList, imgs[0]);
    },
    // 删除图
    removeImg(e) {},
    // 提交申述
    async submit() {
      if (this.reValue == "" || this.reImgList.length == 0) {
        uni.showToast({
          title: this.$t('otc.order.appeal.tips_none'),
          icon: "none",
          duration: 1500
        });
        return;
      }
      this.isButton = false;
      if (this.reImgList.length != 0) {
        for (let i = 0; i < this.reImgList.length; i++) {
          let res = await this.reUpload({
            tempFilePaths: this.reImgList[i]
          });
          console.log(res.url);
          this.imageList = [...this.imageList, res.url];
        }
        console.log(this.imageList);
      }
      await this.tradeAppeal({
        id: this.reID,
        reason: this.reValue,
        image_list: this.imageList
      });
      uni.showToast({
        title: this.$t('common.tips.submitted'),
        icon: "success",
        duration: 1500
      });
      this.isButton = true;
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    }
  }
};
</script>

<style scoped>
.re-container {
  width: 100%;
  height: 100%;
  padding: 20rpx;
  box-sizing: border-box;
}
.re-content {
  width: 100%;
  height: 100%rpx;
  background: #fff;
  border-radius: 11rpx;
  box-shadow: 0px 1px 10px 0px rgba(150, 150, 150, 0.1);
  position: relative;
}
.re-text {
  padding: 20rpx;
  height: 100%;
  box-sizing: border-box;
  position: relative;
}
.re-input {
  width: 100%;
  border-bottom: 1px solid #f1f1f1;
  font-size: 24rpx;
  padding-bottom: 60rpx;
  box-sizing: border-box;
}
.value-length {
  position: absolute;
  right: 24rpx;
  top: 214rpx;
}
</style>
